<template>
  <div class="box-border h-full px-4">
    <div class="rounded-md border_blue !border-blue-500 w-32 flex items-center justify-center">
      减阻剂设置
    </div>
    <div class="">
      <el-radio-group v-model="JZType">
        <el-radio value="0" size="large">特性设置</el-radio>
        <el-radio value="1" size="large"> 减阻率设置</el-radio>
      </el-radio-group>
    </div>
    <div v-if="JZType === '0'" class="box-border w-full h-full overflow-y-auto">
      <!-- 乌百线 -->
      <div class="box-border flex flex-col justify-between mt-2">
        <div class="flex items-center font-bold">
          <el-checkbox v-model="wb_jz_lineChecked" class="mr-2">乌百线</el-checkbox>
        </div>
        <div v-show="wb_jz_lineChecked" class="mt-2 text-base">
          <div class="flex h-[50px]">
            <div
              class="box-border flex justify-center items-center text-center w-[82px] border bg_table_header bg-white"
            >
              减阻剂特性参数A
            </div>
            <div
              class="box-border flex justify-center items-center text-center w-[82px] topBorder bottomBorder rightBorder bg_table_header bg-white"
            >
              减阻剂特性参数B
            </div>
            <div
              class="box-border flex justify-center items-center text-center w-[82px] topBorder bottomBorder rightBorder bg_table_header bg-white"
            >
              减阻剂特性参数N
            </div>
            <div
              class="box-border flex justify-center items-center text-center w-[82px] topBorder bottomBorder rightBorder bg_table_header bg-white"
            >
              注入浓度
            </div>
            <div
              class="box-border flex justify-center items-center text-center w-[82px] topBorder bottomBorder rightBorder bg_table_header bg-white"
            >
              注入时间
            </div>
          </div>
          <div class="flex h-[40px]">
            <div
              class="box-border flex items-center px-5 w-[82px] bottomBorder rightBorder leftBorder2 bg-white"
            >
              <el-input v-model="wb_deblockingParameterA" class="no-style-input !text-base" />
            </div>
            <div
              class="box-border flex items-center px-5 w-[82px] rightBorder bottomBorder bg-white"
            >
              <el-input v-model="wb_deblockingParameterB" class="no-style-input !text-base" />
            </div>
            <div
              class="box-border flex items-center px-5 w-[82px] rightBorder bottomBorder bg-white"
            >
              <el-input v-model="wb_deblockingParameterN" class="no-style-input !text-base" />
            </div>
            <div
              class="box-border flex items-center px-5 w-[82px] rightBorder bottomBorder bg-white"
            >
              <el-input v-model="wb_injectionConcentration" class="no-style-input !text-base" />
            </div>
            <div
              class="box-border flex items-center px-5 w-[82px] rightBorder bottomBorder bg-white"
            >
              <el-input v-model="wb_injectionTime" class="no-style-input !text-base" />
            </div>
          </div>
        </div>
      </div>

      <!-- 百克线 -->
      <div class="box-border flex flex-col justify-between mt-2">
        <div class="flex items-center font-bold">
          <el-checkbox v-model="bk_jz_lineChecked" class="mr-2">百克线</el-checkbox>
        </div>
        <div v-show="bk_jz_lineChecked" class="w-full mt-2 text-base bg-white">
          <div class="flex h-[50px]">
            <div
              class="box-border flex items-center justify-center flex-1 text-center border bg_table_header"
            >
              注入油品
            </div>
            <div
              class="box-border flex justify-center items-center text-center w-[82px] topBorder bottomBorder rightBorder bg_table_header"
            >
              减阻剂特性参数A
            </div>
            <div
              class="box-border flex justify-center items-center text-center w-[82px] topBorder bottomBorder rightBorder bg_table_header"
            >
              减阻剂特性参数B
            </div>
            <div
              class="box-border flex justify-center items-center text-center w-[82px] topBorder bottomBorder rightBorder bg_table_header"
            >
              减阻剂特性参数N
            </div>
          </div>
          <div class="flex h-[40px]">
            <div class="flex items-center flex-1 w-40 px-5 bottomBorder rightBorder leftBorder2">
              <el-select v-model="bk_oilType1" placeholder="请选择油品种类">
                <el-option
                  v-for="item in oilList"
                  :key="item.id"
                  :label="item.chinese_name"
                  :value="item.oils_name"
                />
              </el-select>
            </div>
            <div class="box-border flex items-center px-5 w-[82px] rightBorder bottomBorder">
              <el-input v-model="bk_deblockingParameterA1" class="no-style-input !text-base" />
            </div>
            <div class="box-border flex items-center px-5 w-[82px] rightBorder bottomBorder">
              <el-input v-model="bk_deblockingParameterB1" class="no-style-input !text-base" />
            </div>
            <div class="box-border flex items-center px-5 w-[82px] rightBorder bottomBorder">
              <el-input v-model="bk_deblockingParameterN1" class="no-style-input !text-base" />
            </div>
          </div>
          <div class="flex h-[40px] shadow-md">
            <div class="flex items-center flex-1 px-5 bottomBorder rightBorder leftBorder2">
              <el-select v-model="bk_oilType2" placeholder="请选择油品种类">
                <el-option
                  v-for="item in oilList"
                  :key="item.id"
                  :label="item.chinese_name"
                  :value="item.oils_name"
                />
              </el-select>
            </div>
            <div class="box-border flex items-center px-5 w-[82px] rightBorder bottomBorder">
              <el-input v-model="bk_deblockingParameterA2" class="no-style-input !text-base" />
            </div>
            <div class="box-border flex items-center px-5 w-[82px] rightBorder bottomBorder">
              <el-input v-model="bk_deblockingParameterB2" class="no-style-input !text-base" />
            </div>
            <div class="box-border flex items-center px-5 w-[82px] rightBorder bottomBorder">
              <el-input v-model="bk_deblockingParameterN2" class="no-style-input !text-base" />
            </div>
          </div>
          <div class="flex gap-6 mt-2 w-full !bg-[#f6f6f6]">
            <div class="flex items-center mt-2">
              <span class="w-[80px]">注入时间</span>
              <el-input v-model="bk_injectionTime" class="!w-[80px]" />
              <span class="ml-2">h</span>
            </div>
            <div class="flex items-center mt-2">
              <span class="w-[80px]">注入浓度</span>
              <el-input v-model="bk_injectionConcentration" class="!w-[80px]" />
              <span class="ml-2">ppm</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 调油一线 -->
      <div class="box-border flex flex-col justify-between w-full mt-2 rounded-lg">
        <div class="flex items-center font-bold">
          <el-checkbox v-model="ty_jz_lineChecked" class="mr-2">调油一线</el-checkbox>
        </div>
        <div v-show="ty_jz_lineChecked" class="w-full mt-2 text-base bg-white">
          <div class="flex h-[50px]">
            <div
              class="box-border flex items-center justify-center flex-1 text-center border bg_table_header"
            >
              注入油品
            </div>
            <div
              class="box-border flex justify-center items-center text-center w-[82px] topBorder bottomBorder rightBorder bg_table_header"
            >
              减阻剂特性参数A
            </div>
            <div
              class="box-border flex justify-center items-center text-center w-[82px] topBorder bottomBorder rightBorder bg_table_header"
            >
              减阻剂特性参数B
            </div>
            <div
              class="box-border flex justify-center items-center text-center w-[82px] topBorder bottomBorder rightBorder bg_table_header"
            >
              减阻剂特性参数N
            </div>
          </div>
          <div class="flex h-[40px]">
            <div class="flex items-center flex-1 w-40 px-5 bottomBorder rightBorder leftBorder2">
              <el-select v-model="ty_oilType1" placeholder="请选择油品种类">
                <el-option
                  v-for="item in oilList"
                  :key="item.id"
                  :label="item.chinese_name"
                  :value="item.oils_name"
                />
              </el-select>
            </div>
            <div class="box-border flex items-center px-5 w-[82px] rightBorder bottomBorder">
              <el-input v-model="ty_deblockingParameterA1" class="no-style-input !text-base" />
            </div>
            <div class="box-border flex items-center px-5 w-[82px] rightBorder bottomBorder">
              <el-input v-model="ty_deblockingParameterB1" class="no-style-input !text-base" />
            </div>
            <div class="box-border flex items-center px-5 w-[82px] rightBorder bottomBorder">
              <el-input v-model="ty_deblockingParameterN1" class="no-style-input !text-base" />
            </div>
          </div>
          <div class="flex h-[40px]">
            <div class="flex items-center flex-1 px-5 bottomBorder rightBorder leftBorder2">
              <el-select v-model="ty_oilType2" placeholder="请选择油品种类">
                <el-option
                  v-for="item in oilList"
                  :key="item.id"
                  :label="item.chinese_name"
                  :value="item.oils_name"
                />
              </el-select>
            </div>
            <div class="box-border flex items-center px-5 w-[82px] rightBorder bottomBorder">
              <el-input v-model="ty_deblockingParameterA2" class="no-style-input !text-base" />
            </div>
            <div class="box-border flex items-center px-5 w-[82px] rightBorder bottomBorder">
              <el-input v-model="ty_deblockingParameterB2" class="no-style-input !text-base" />
            </div>
            <div class="box-border flex items-center px-5 w-[82px] rightBorder bottomBorder">
              <el-input v-model="ty_deblockingParameterN2" class="no-style-input !text-base" />
            </div>
          </div>
          <div class="flex gap-6 mt-2 w-full !bg-[#f6f6f6]">
            <div class="flex items-center mt-2">
              <span class="w-[80px]">注入时间</span>
              <el-input v-model="ty_injectionTime" class="!w-[80px]" />
              <span class="ml-2">h</span>
            </div>
            <div class="flex items-center mt-2">
              <span class="w-[80px]">注入浓度</span>
              <el-input v-model="ty_injectionConcentration" class="!w-[80px]" />
              <span class="ml-2">ppm</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 新81#线 -->
      <div class="box-border flex flex-col justify-between w-full mt-2 rounded-lg">
        <div class="flex items-center font-bold">
          <el-checkbox v-model="new81_jz_lineChecked" class="mr-2">新81#线</el-checkbox>
        </div>
        <div v-show="new81_jz_lineChecked" class="w-full mt-2 text-base">
          <div class="flex h-[50px]">
            <div
              class="box-border flex justify-center items-center text-center w-[82px] border bg_table_header bg-white"
            >
              减阻剂特性参数A
            </div>
            <div
              class="box-border flex justify-center items-center text-center w-[82px] topBorder bottomBorder rightBorder bg_table_header bg-white"
            >
              减阻剂特性参数B
            </div>
            <div
              class="box-border flex justify-center items-center text-center w-[82px] topBorder bottomBorder rightBorder bg_table_header bg-white"
            >
              减阻剂特性参数N
            </div>
            <div
              class="box-border flex justify-center items-center text-center w-[82px] topBorder bottomBorder rightBorder bg_table_header bg-white"
            >
              注入浓度
            </div>
            <div
              class="box-border flex justify-center items-center text-center w-[82px] topBorder bottomBorder rightBorder bg_table_header bg-white"
            >
              注入时间
            </div>
          </div>
          <div class="flex h-[40px]">
            <div
              class="box-border flex items-center px-5 w-[82px] bottomBorder rightBorder leftBorder2 bg-white"
            >
              <el-input v-model="new81_deblockingParameterA" class="no-style-input !text-base" />
            </div>
            <div
              class="box-border flex items-center px-5 w-[82px] rightBorder bottomBorder bg-white"
            >
              <el-input v-model="new81_deblockingParameterB" class="no-style-input !text-base" />
            </div>
            <div
              class="box-border flex items-center px-5 w-[82px] rightBorder bottomBorder bg-white"
            >
              <el-input v-model="new81_deblockingParameterN" class="no-style-input !text-base" />
            </div>
            <div
              class="box-border flex items-center px-5 w-[82px] rightBorder bottomBorder bg-white"
            >
              <el-input v-model="new81_injectionConcentration" class="no-style-input !text-base" />
            </div>
            <div
              class="box-border flex items-center px-5 w-[82px] rightBorder bottomBorder bg-white"
            >
              <el-input v-model="new81_injectionTime" class="no-style-input !text-base" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="JZType === '1'" class="w-[426px] h-[180px] rounded-lg px-2 box-border">
      <div class="w-full mt-2 text-base">
        <div class="flex items-center text-lg font-bold">
          <el-checkbox v-model="wb_jz_lineChecked" class="mr-2">乌百线</el-checkbox>
        </div>
        <div v-show="wb_jz_lineChecked">
          <div class="text-lg font-bold">乌百线</div>
          <div class="flex h-[50px] mt-2">
            <div
              class="box-border flex justify-center items-center text-center w-[100px] border bg_table_header bg-white"
            >
              减阻率
            </div>
            <div
              class="box-border flex justify-center items-center text-center w-[100px] topBorder bottomBorder rightBorder bg_table_header bg-white"
            >
              注入时间
            </div>
          </div>
          <div class="flex h-[40px]">
            <div
              class="box-border flex items-center px-5 w-[100px] bottomBorder rightBorder leftBorder2 bg-white"
            >
              <el-input v-model="wb_deblockingRate" class="no-style-input !text-base" />
            </div>
            <div
              class="box-border flex items-center px-5 w-[100px] rightBorder bottomBorder bg-white"
            >
              <el-input v-model="wb_injectionTime" class="no-style-input !text-base" />
            </div>
          </div>
        </div>
      </div>

      <div class="w-full mt-2 text-base">
        <div class="flex items-center text-lg font-bold">
          <el-checkbox v-model="bk_jz_lineChecked" class="mr-2">百克线</el-checkbox>
        </div>
        <div v-show="bk_jz_lineChecked">
          <div class="text-lg font-bold">百克线</div>
          <div class="flex h-[50px] mt-2">
            <div
              class="box-border flex justify-center items-center text-center w-[250px] border bg_table_header bg-white"
            >
              注入油品
            </div>
            <div
              class="box-border flex justify-center items-center text-center w-[100px] topBorder bottomBorder rightBorder bg_table_header bg-white"
            >
              减阻率
            </div>
          </div>
          <div class="flex h-[40px]">
            <div
              class="flex w-[250px] items-center px-5 bottomBorder rightBorder leftBorder2 box-border bg-white"
            >
              <el-select v-model="bk_oilType1" placeholder="请选择油品种类">
                <el-option
                  v-for="item in oilList"
                  :key="item.id"
                  :label="item.chinese_name"
                  :value="item.oils_name"
                />
              </el-select>
            </div>
            <div
              class="box-border flex items-center px-5 w-[100px] rightBorder bottomBorder bg-white"
            >
              <el-input v-model="bk_deblockingRate" class="no-style-input !text-base" />
            </div>
          </div>
          <div class="flex h-[40px]">
            <div
              class="flex w-[250px] items-center px-5 bottomBorder rightBorder leftBorder2 box-border bg-white"
            >
              <el-select v-model="bk_oilType2" placeholder="请选择油品种类">
                <el-option
                  v-for="item in oilList"
                  :key="item.id"
                  :label="item.chinese_name"
                  :value="item.oils_name"
                />
              </el-select>
            </div>
            <div
              class="box-border flex items-center px-5 w-[100px] rightBorder bottomBorder bg-white"
            >
              <el-input v-model="bk_deblockingRate" class="no-style-input !text-base" />
            </div>
          </div>
          <div class="flex items-center w-full mt-2">
            <span class="w-[140px] text-right">运行后注入时刻</span>
            <el-input v-model="bk_injectionTime" class="!w-[160px] ml-6" />
            <span class="ml-2">小时</span>
          </div>
        </div>
      </div>

      <div class="w-full mt-2 text-base">
        <div class="flex items-center text-lg font-bold">
          <el-checkbox v-model="ty_jz_lineChecked" class="mr-2">调油一线</el-checkbox>
        </div>
        <div v-show="ty_jz_lineChecked">
          <div class="text-lg font-bold">调油一线</div>
          <div class="flex h-[50px] mt-2">
            <div
              class="box-border flex justify-center items-center text-center w-[250px] border bg_table_header bg-white"
            >
              注入油品
            </div>
            <div
              class="box-border flex justify-center items-center text-center w-[100px] topBorder bottomBorder rightBorder bg_table_header bg-white"
            >
              减阻率
            </div>
          </div>
          <div class="flex h-[40px]">
            <div
              class="flex w-[250px] items-center px-5 bottomBorder rightBorder leftBorder2 box-border bg-white"
            >
              <el-select v-model="ty_oilType1" placeholder="请选择油品种类">
                <el-option
                  v-for="item in oilList"
                  :key="item.id"
                  :label="item.chinese_name"
                  :value="item.oils_name"
                />
              </el-select>
            </div>
            <div
              class="box-border flex items-center px-5 w-[100px] rightBorder bottomBorder bg-white"
            >
              <el-input v-model="ty_deblockingRate" class="no-style-input !text-base" />
            </div>
          </div>
          <div class="flex h-[40px]">
            <div
              class="flex w-[250px] items-center px-5 bottomBorder rightBorder leftBorder2 box-border bg-white"
            >
              <el-select v-model="ty_oilType2" placeholder="请选择油品种类">
                <el-option
                  v-for="item in oilList"
                  :key="item.id"
                  :label="item.chinese_name"
                  :value="item.oils_name"
                />
              </el-select>
            </div>
            <div
              class="box-border flex items-center px-5 w-[100px] rightBorder bottomBorder bg-white"
            >
              <el-input v-model="ty_deblockingRate" class="no-style-input !text-base" />
            </div>
          </div>
          <div class="flex items-center w-full mt-2">
            <span class="w-[140px] text-right">运行后注入时刻</span>
            <el-input v-model="ty_injectionTime" class="!w-[160px] ml-6" />
            <span class="ml-2">小时</span>
          </div>
        </div>
      </div>

      <div class="w-full mt-2 text-base">
        <div class="flex items-center text-lg font-bold">
          <el-checkbox v-model="new81_jz_lineChecked" class="mr-2">新81#线</el-checkbox>
        </div>
        <div v-show="new81_jz_lineChecked">
          <div class="text-lg font-bold">新81#线</div>
          <div class="flex h-[50px] mt-2">
            <div
              class="box-border flex justify-center items-center text-center w-[100px] border bg_table_header bg-white"
            >
              减阻率
            </div>
            <div
              class="box-border flex justify-center items-center text-center w-[100px] topBorder bottomBorder rightBorder bg_table_header bg-white"
            >
              注入时间
            </div>
          </div>
          <div class="flex h-[40px]">
            <div
              class="box-border flex items-center px-5 w-[100px] bottomBorder rightBorder leftBorder2 bg-white"
            >
              <el-input v-model="new81_deblockingRate" class="no-style-input !text-base" />
            </div>
            <div
              class="box-border flex items-center px-5 w-[100px] rightBorder bottomBorder bg-white"
            >
              <el-input v-model="new81_injectionTime" class="no-style-input !text-base" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  oilList: { type: Array }
})
// 响应式数据
const wb_jz_lineChecked = ref(false)
const bk_jz_lineChecked = ref(false)
const ty_jz_lineChecked = ref(false)
const new81_jz_lineChecked = ref(false)
const JZType = ref('0')
// TODO: 特性设置
const wb_deblockingParameterA = ref('10')
const wb_deblockingParameterB = ref('6')
const wb_deblockingParameterN = ref('0')
const wb_injectionConcentration = ref('20')
const wb_injectionTime = ref('4')

const bk_oilType1 = ref('WEHY')
const bk_oilType2 = ref('BLY_2024S')
const bk_deblockingParameterA1 = ref('10')
const bk_deblockingParameterB1 = ref('6')
const bk_deblockingParameterN1 = ref('0')
const bk_deblockingParameterA2 = ref('10')
const bk_deblockingParameterB2 = ref('6')
const bk_deblockingParameterN2 = ref('0')
const bk_injectionConcentration = ref('20')
const bk_injectionTime = ref('4')

const ty_oilType1 = ref('BLY1')
const ty_oilType2 = ref('BKHY_2024S')
const ty_deblockingParameterA1 = ref('10')
const ty_deblockingParameterB1 = ref('6')
const ty_deblockingParameterN1 = ref('0')
const ty_deblockingParameterA2 = ref('10')
const ty_deblockingParameterB2 = ref('6')
const ty_deblockingParameterN2 = ref('0')
const ty_injectionConcentration = ref('20')
const ty_injectionTime = ref('4')

const new81_deblockingParameterA = ref('10')
const new81_deblockingParameterB = ref('6')
const new81_deblockingParameterN = ref('0')
const new81_injectionConcentration = ref('20')
const new81_injectionTime = ref('4')

// TODO: 减阻率设置
const wb_deblockingRate = ref('0.1')
const bk_deblockingRate = ref('0.1')
const ty_deblockingRate = ref('0.1')
const new81_deblockingRate = ref('0.1')

const validateSettings = () => {
  if (
    !wb_jz_lineChecked.value &&
    !bk_jz_lineChecked.value &&
    !ty_jz_lineChecked.value &&
    !new81_jz_lineChecked.value
  ) {
    ElMessage.error('至少选择一条管线')
    return false
  }
  if (JZType.value === '0') {
    // 特性设置模式校验
    // 乌百线
    const wbJZFields = [
      { value: wb_deblockingParameterA.value, name: '乌百线减阻剂特性参数A' },
      { value: wb_deblockingParameterB.value, name: '乌百线减阻剂特性参数B' },
      { value: wb_deblockingParameterN.value, name: '乌百线减阻剂特性参数N' },
      { value: wb_injectionConcentration.value, name: '乌百线注入浓度' },
      { value: wb_injectionTime.value, name: '乌百线注入时间' }
    ]
    for (const field of wbJZFields) {
      if (!field.value) {
        ElMessage.error(`${field.name}不能为空`)
        return false
      }
    }

    // 百克线
    const bkJZFields = [
      { value: bk_oilType1.value, name: '百克线注入油品1' },
      { value: bk_deblockingParameterA1.value, name: '百克线油品1减阻剂特性参数A' },
      { value: bk_deblockingParameterB1.value, name: '百克线油品1减阻剂特性参数B' },
      { value: bk_deblockingParameterN1.value, name: '百克线油品1减阻剂特性参数N' },
      { value: bk_injectionConcentration.value, name: '百克线油品注入浓度' },
      { value: bk_oilType2.value, name: '百克线注入油品2' },
      { value: bk_deblockingParameterA2.value, name: '百克线油品2减阻剂特性参数A' },
      { value: bk_deblockingParameterB2.value, name: '百克线油品2减阻剂特性参数B' },
      { value: bk_deblockingParameterN2.value, name: '百克线油品2减阻剂特性参数N' }
    ]
    for (const field of bkJZFields) {
      if (!field.value) {
        ElMessage.error(`${field.name}不能为空`)
        return false
      }
    }
    if (!bk_injectionTime.value) {
      ElMessage.error('百克线运行后注入时刻不能为空')
      return false
    }

    // 调油一线
    const tyJZFields = [
      { value: ty_oilType1.value, name: '调油一线注入油品1' },
      { value: ty_deblockingParameterA1.value, name: '调油一线油品1减阻剂特性参数A' },
      { value: ty_deblockingParameterB1.value, name: '调油一线油品1减阻剂特性参数B' },
      { value: ty_deblockingParameterN1.value, name: '调油一线油品1减阻剂特性参数N' },
      { value: ty_injectionConcentration.value, name: '调油一线油品注入浓度' },
      { value: ty_oilType2.value, name: '调油一线注入油品2' },
      { value: ty_deblockingParameterA2.value, name: '调油一线油品2减阻剂特性参数A' },
      { value: ty_deblockingParameterB2.value, name: '调油一线油品2减阻剂特性参数B' },
      { value: ty_deblockingParameterN2.value, name: '调油一线油品2减阻剂特性参数N' }
    ]
    for (const field of tyJZFields) {
      if (!field.value) {
        ElMessage.error(`${field.name}不能为空`)
        return false
      }
    }
    if (!ty_injectionTime.value) {
      ElMessage.error('调油一线运行后注入时刻不能为空')
      return false
    }

    // 新81#线
    const new81JZFields = [
      { value: new81_deblockingParameterA.value, name: '新81#线减阻剂特性参数A' },
      { value: new81_deblockingParameterB.value, name: '新81#线减阻剂特性参数B' },
      { value: new81_deblockingParameterN.value, name: '新81#线减阻剂特性参数N' },
      { value: new81_injectionConcentration.value, name: '新81#线注入浓度' },
      { value: new81_injectionTime.value, name: '新81#线注入时间' }
    ]
    for (const field of new81JZFields) {
      if (!field.value) {
        ElMessage.error(`${field.name}不能为空`)
        return false
      }
    }
  } else if (JZType.value === '1') {
    // 减阻率设置模式校验
    // 乌百线
    if (!wb_deblockingRate.value) {
      ElMessage.error('乌百线减阻率不能为空')
      return false
    }
    if (!wb_injectionTime.value) {
      ElMessage.error('乌百线注入时间不能为空')
      return false
    }

    // 百克线
    const bkRateFields = [
      { value: bk_oilType1.value, name: '百克线注入油品1' },
      { value: bk_deblockingRate.value, name: '百克线油品减阻率' },
      { value: bk_oilType2.value, name: '百克线注入油品2' }
    ]
    for (const field of bkRateFields) {
      if (!field.value) {
        ElMessage.error(`${field.name}不能为空`)
        return false
      }
    }
    if (!bk_injectionTime.value) {
      ElMessage.error('百克线运行后注入时刻不能为空')
      return false
    }

    // 调油一线
    const tyRateFields = [
      { value: ty_oilType1.value, name: '调油一线注入油品1' },
      { value: ty_deblockingRate.value, name: '调油一线油品减阻率' },
      { value: ty_oilType2.value, name: '调油一线注入油品2' }
    ]
    for (const field of tyRateFields) {
      if (!field.value) {
        ElMessage.error(`${field.name}不能为空`)
        return false
      }
    }
    if (!ty_injectionTime.value) {
      ElMessage.error('调油一线运行后注入时刻不能为空')
      return false
    }

    // 新81#线
    if (!new81_deblockingRate.value) {
      ElMessage.error('新81#线减阻率不能为空')
      return false
    }
    if (!new81_injectionTime.value) {
      ElMessage.error('新81#线注入时间不能为空')
      return false
    }
  }

  return true
}

const isFormValid = computed(() => {
  if (
    !wb_jz_lineChecked.value &&
    !bk_jz_lineChecked.value &&
    !ty_jz_lineChecked.value &&
    !new81_jz_lineChecked.value
  ) {
    return false
  }
  if (JZType.value === '0') {
    // 特性设置模式校验
    // 乌百线
    const wbJZFields = [
      wb_deblockingParameterA.value,
      wb_deblockingParameterB.value,
      wb_deblockingParameterN.value,
      wb_injectionConcentration.value,
      wb_injectionTime.value
    ]
    if (!wbJZFields.every((field) => field)) return false

    // 百克线
    const bkJZFields = [
      bk_oilType1.value,
      bk_deblockingParameterA1.value,
      bk_deblockingParameterB1.value,
      bk_deblockingParameterN1.value,
      bk_injectionConcentration.value,
      bk_oilType2.value,
      bk_deblockingParameterA2.value,
      bk_deblockingParameterB2.value,
      bk_deblockingParameterN2.value,
      bk_injectionTime.value
    ]
    if (!bkJZFields.every((field) => field)) return false

    // 调油一线
    const tyJZFields = [
      ty_oilType1.value,
      ty_deblockingParameterA1.value,
      ty_deblockingParameterB1.value,
      ty_deblockingParameterN1.value,
      ty_injectionConcentration.value,
      ty_oilType2.value,
      ty_deblockingParameterA2.value,
      ty_deblockingParameterB2.value,
      ty_deblockingParameterN2.value,
      ty_injectionTime.value
    ]
    if (!tyJZFields.every((field) => field)) return false

    // 新81#线
    const new81JZFields = [
      new81_deblockingParameterA.value,
      new81_deblockingParameterB.value,
      new81_deblockingParameterN.value,
      new81_injectionConcentration.value,
      new81_injectionTime.value
    ]
    if (!new81JZFields.every((field) => field)) return false
  } else if (JZType.value === '1') {
    // 减阻率设置模式校验
    // 乌百线
    if (!wb_deblockingRate.value || !wb_injectionTime.value) return false

    // 百克线
    const bkRateFields = [
      bk_oilType1.value,
      bk_deblockingRate.value,
      bk_oilType2.value,
      bk_injectionTime.value
    ]
    if (!bkRateFields.every((field) => field)) return false

    // 调油一线
    const tyRateFields = [
      ty_oilType1.value,
      ty_deblockingRate.value,
      ty_oilType2.value,
      ty_injectionTime.value
    ]
    if (!tyRateFields.every((field) => field)) return false

    // 新81#线
    if (!new81_deblockingRate.value || !new81_injectionTime.value) return false
  }

  return true
})

const getParamsData = () => {
  return {
    method: JZType.value,
    M_1: wb_jz_lineChecked.value ? '1' : '0',
    M_2: bk_jz_lineChecked.value ? '1' : '0',
    M_3: ty_jz_lineChecked.value ? '1' : '0',
    M_4: new81_jz_lineChecked.value ? '1' : '0',
    T_dra_1: wb_injectionTime.value,
    T_dra_2: bk_injectionTime.value,
    T_dra_3: ty_injectionTime.value,
    T_dra_4: new81_injectionTime.value,
    C_1: wb_injectionConcentration.value,
    C_2: bk_injectionConcentration.value,
    C_3: ty_injectionConcentration.value,
    C_4: new81_injectionConcentration.value,
    A1_1: wb_deblockingParameterA.value,
    B1_1: wb_deblockingParameterB.value,
    N1_1: wb_deblockingParameterN.value,
    A1_2: bk_deblockingParameterA1.value,
    B1_2: bk_deblockingParameterB1.value,
    N1_2: bk_deblockingParameterN1.value,
    A2_2: bk_deblockingParameterA2.value,
    B2_2: bk_deblockingParameterB2.value,
    N2_2: bk_deblockingParameterN2.value,
    A1_3: ty_deblockingParameterA1.value,
    B1_3: ty_deblockingParameterB1.value,
    N1_3: ty_deblockingParameterN1.value,
    A2_3: ty_deblockingParameterA2.value,
    B2_3: ty_deblockingParameterB2.value,
    N2_3: ty_deblockingParameterN2.value,
    A1_4: new81_deblockingParameterA.value,
    B1_4: new81_deblockingParameterB.value,
    N1_4: new81_deblockingParameterN.value,
    a_1: wb_deblockingRate.value,
    a_2: bk_deblockingRate.value,
    a_3: ty_deblockingRate.value,
    a_4: new81_deblockingRate.value
  }
}

// 暴露给父组件的方法和数据
defineExpose({
  validateSettings,
  isFormValid,
  getParamsData
})
</script>

<style lang="scss" scoped>
.leftBorder {
  border-left: 1px dashed black;
  border-image: repeating-linear-gradient(
      to bottom,
      black 0,
      black 8px,
      transparent 8px,
      transparent 16px
    )
    1;
}
.border {
  border: 1px solid black;
}
.rightBorder {
  border-right: 1px solid black;
}
.bottomBorder {
  border-bottom: 1px solid black;
}
.topBorder {
  border-top: 1px solid black;
}
.leftBorder2 {
  border-left: 1px solid black;
}

.bottomDashBorder {
  border-bottom: 1px dashed rgba(53, 63, 64, 0.4);
  border-image: repeating-linear-gradient(
      to right,
      rgba(53, 63, 64, 0.4) 0,
      rgba(53, 63, 64, 0.4) 8px,
      transparent 8px,
      transparent 16px
    )
    1;
}

.shadow {
  box-shadow: 3px 3px 11px 0px rgba(0, 0, 0, 0.15);
}
:deep(.no-style-input) {
  .el-input__wrapper {
    background: none;
    box-shadow: none;
    padding: 0;
  }

  .el-input__inner {
    border: none;
    background: none;
  }
}

.line {
  background: linear-gradient(
    to right,
    rgba(53, 63, 64, 0),
    rgba(53, 63, 64, 1),
    rgba(53, 63, 64, 0)
  );
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.bg_detail {
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.bg_table_header {
  // background-color: rgba(247, 247, 247, 1);
}

.custom-button {
  background-color: rgba(69, 122, 178, 0.18);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border: 1px solid rgba(69, 122, 178, 1);
  border-radius: 6px;
  color: rgba(69, 122, 178, 0.8);
  width: 140px;
  height: 40px;

  cursor: pointer;
  &:hover {
    background-color: rgba(69, 122, 178, 1);
    border: 1px solid rgba(69, 122, 178, 1);
    color: white;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border-radius: 6px;
  }
}

.custom-button-not-active {
  cursor: not-allowed;
  background-color: rgba(128, 128, 128, 0.58);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border: 1px solid gray;
  border-radius: 6px;
  color: white;
  width: 140px;
  height: 40px;
  &:hover {
    background-color: gray;
    border: 1px solid gray;
    color: white;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border-radius: 6px;
  }
}

.border_blue {
  border: 2px solid rgba(69, 122, 178, 1);
}
</style>
